<template>
	<div class="Body">
		<el-table :data="detailsData" style="width: 100%">
				<template slot="empty">
					<el-empty description="描述文字"></el-empty>
				</template>
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-form label-position="left" class="demo-table-expand">
						<el-form-item v-for="Details in props.row.znOrderDetailsList" :key="Details.detailsId">
							<img :src="$store.state.imgShowRoad2 + '/file/' + Details.shopPicture" class="avatar" />
							<div class="InfoBox">
								<div class="farmInfo">
									<div>商品名称：{{ Details.farmName }}</div>
									<div>价格：{{ Details.unitPrice }}</div>
									<div>规格：{{ Details.specificationBean.znSpecTitle }}</div>
								</div>
								<div class="count">
									<span>数量：x&nbsp;&nbsp;{{Details.count}}</span>
								</div>
							</div>
						</el-form-item>
					</el-form>
				</template>
			</el-table-column>
			<el-table-column label="订单号" prop="orderNumber">
			</el-table-column>
			<el-table-column label="收货人">
				<template slot-scope="scope">
					<el-popover trigger="hover" placement="top"
						v-if="scope.row.znOrderDetailsList && scope.row.znOrderDetailsList.length > 0">
						<p>住址: {{ scope.row.znOrderDetailsList[0].addressDelivery }}</p>
						<p>联系方式：{{scope.row.znOrderDetailsList[0].phone}}</p>
						<div slot="reference" class="name-wrapper">
							<el-tag size="medium">{{ scope.row.znOrderDetailsList[0].consignee }}</el-tag>
						</div>
					</el-popover>
				</template>
			</el-table-column>
			<el-table-column label="总价">
				<template slot-scope="scope">
					<span>￥{{scope.row.totalPrice}}</span>
				</template>
			</el-table-column>
			<el-table-column label="支付状态">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.payStatus === 0" type="danger">待付款</el-tag>
					<el-tag v-if="scope.row.payStatus === 1" type="success">已支付</el-tag>
					<el-tag v-if="scope.row.payStatus === 2" type="danger">退款申请中</el-tag>
					<el-tag v-if="scope.row.payStatus === 3" type="danger">已退款</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="状态">
				<template slot-scope="scope">
					<el-tag v-if="scope.row.deliverStatus === 0&& scope.row.payStatus === 1" type="danger">未发货</el-tag>
					<el-tag v-if="scope.row.deliverStatus === 1 && scope.row.takeStatus === 0"
						type="danger">待收货</el-tag>
					<el-tag v-if="scope.row.takeStatus === 1 && scope.row.evaluateStatus === 0"
						type="danger">待评价</el-tag>
					<el-tag v-if="scope.row.evaluateStatus === 1" type="success">已评价</el-tag>
					<el-tag v-if="scope.row.payStatus === 2 && scope.row.deliverStatus === 0" type="danger">退款</el-tag>
					<el-tag v-if="scope.row.payStatus === 3 && scope.row.deliverStatus === 0" type="success">交易关闭</el-tag>
				</template>
			</el-table-column>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<!-- 如果 payStatus 为 0，显示支付按钮 -->
					<el-button size="mini" type="primary" v-if="scope.row.payStatus === 0 && scope.row.takeStatus === 0"
						@click="handlePay(scope.row)">去支付</el-button>
					<el-button size="mini" type="primary" v-if="scope.row.payStatus === 1 && scope.row.takeStatus === 0"
						@click="postApplyFor(scope.row)">申请退款</el-button>
					<el-button size="mini" type="primary"
						v-if="scope.row.evaluateStatus === 0 && scope.row.takeStatus === 1"
						@click="Toevaluate(scope.row)">去评价</el-button>
						<el-button size="mini" type="primary"
							v-if="scope.row.evaluateStatus === 1"
							@click="Toevaluate(scope.row)">修改评价</el-button>
					<el-dropdown style="margin-left: 5px;">
						<el-button type="primary" size="mini">
							操作<i class="el-icon-arrow-down el-icon--right"></i>
						</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item>
								<el-button size="mini" type="primary"
									v-if="scope.row.takeStatus === 0 && scope.row.deliverStatus === 1"
									@click="TakeDelivery(scope.$index,scope.row)">收货</el-button>
							</el-dropdown-item>
							<el-dropdown-item>
							</el-dropdown-item>
							<el-dropdown-item>
								<el-button size="mini" type="danger"
									@click="handleDelete(scope.$index, scope.row)">删除</el-button>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>
		<div class="footer_page">
			<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pageSize"
				layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
		</div>
		<el-dialog title="支付宝扫码支付" :visible.sync="dialogVisible" width="252px" center>
			<!--二维码生成-->
			<vueQr :text="qr" :size="200" :margin="10" :correctLevel="0" :whiteMargin="false" :logoSrc="logoSrc">
			</vueQr>
			<span id="dialogSpan" v-show="paySucc == true"></span>
			<span id="dialogSpan2" v-show="paySucc == true">
				<i class="el-icon-success"
					style="background-color: #FFFFFF; color:#67C23A; font-size: 60px;border-radius: 30px;" />
				<br />
				支付成功
			</span>
		</el-dialog>

		<el-dialog title="评价" :visible.sync="evaluatedialogVisible" width="50%" :before-close="handleClose">
			<el-card class="box-card">
				<div v-for="(item,index) in rowcopy" :key="index" class="order-evaluate">
					<el-image style="width: 100px; height: 100px"
						:src="$store.state.imgShowRoad2 + '/file/' + item.shopPicture"></el-image>
					<div class="Infocard">
						<div class="farmInfo">
							<div>商品名称：{{item.farmName}}</div>
							<div>价格：{{item.specificationBean.znSpecPrice}}</div>
							<div>规格：{{item.specificationBean.znSpecTitle}}</div>
						</div>
						<div class="count">
							<span>数量：x&nbsp;&nbsp;{{item.count}}</span>
						</div>
						<el-button type="primary" icon="el-icon-edit" v-if="item.evaStatus == 0" @click="onClickEvaluate(index,item)">
							评价
						</el-button>
						<el-button type="primary" icon="el-icon-edit" v-if="item.evaStatus == 1" @click="editEvaluate(index,item)">
							修改
						</el-button>
					</div>
				</div>
			</el-card>
			
			<el-dialog width="30%" title="评价" :visible.sync="innerVisible" append-to-body :before-close="addHandleClose">
				<div style="display: flex;margin-bottom: 20px;">
					<span style="font-size: 16px; margin-right: 45px;">评分</span>
					<el-rate v-model="value" :colors="colors" show-score text-color="#ff0000" @change="rateOrder">
					</el-rate>
				</div>
				<div style="display: flex;">
					<span style="font-size: 16px; margin-right: 15px;">评价内容
					</span>
					<el-input style="width: 440px;" type="textarea" maxlength="100" show-word-limit placeholder="请输入内容"
						v-model="input" clearable>
					</el-input>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="addHandleClose">取 消</el-button>
					<el-button type="primary" @click="SubmitEvaluation">确定</el-button>
				</div>
			</el-dialog>
			<el-dialog width="30%" title="编辑评价" :visible.sync="editInnerVisible" append-to-body :before-close="EditHandleClose">
				<div style="display: flex;margin-bottom: 20px;">
					<span style="font-size: 16px; margin-right: 45px;">评分</span>
					<el-rate v-model="value" :colors="colors" show-score text-color="#ff0000" @change="rateOrder">
					</el-rate>
				</div>
				<div style="display: flex;">
					<span style="font-size: 16px; margin-right: 15px;">评价内容
					</span>
					<el-input style="width: 440px;" type="textarea" maxlength="100" show-word-limit placeholder="请输入内容"
						v-model="input" clearable>
					</el-input>
				</div>
				<div slot="footer" class="dialog-footer">
					<el-button @click="EditHandleClose">取 消</el-button>
					<el-button type="primary" @click="EidtEvaluation">确定</el-button>
				</div>
			</el-dialog>
			<span slot="footer" class="dialog-footer">
				<el-button @click="evaluatedialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="evaluatedialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import orderApi from "@/api/order.js"
	import payApi from "@/api/alipay.js"
	import evaApi from "@/api/farmEvaluate.js"
	import vueQr from 'vue-qr'
	import service from "@/utils/serviceApi.js"
	export default {
		components: {
			vueQr
		},
		data() {
			return {
				dialogVisible: false,
				evaluatedialogVisible: false,
				innerVisible: false,
				editInnerVisible: false,
				input: '',
				value: 0,
				colors: ['#99A9BF', '#F7BA2A', '#FF9900'],
				qr: "",
				text: "",
				paySucc: false,
				logoSrc: require('@/assets/zhifubao.png'),
				total: 0,
				pageSize: 10,
				currentPage: 1,
				userInfo: {},
				detailsData: [],
				rowcopy: [],
				farmDetailsDate: {},
				
			};
		},
		methods: {
			handlePay(row) {
				let _this = this;
				// 这里填写后台支付的地址
				service({
					method: 'POST',
					url: "/Alipay/sandboxPay?orderNumber=" + row.orderNumber,
				}).then(res => {
					console.log(res.data)
					this.qr = res.data;
					if ("WebSocket" in window) {
						// 打开一个 web socket
						// 通道地址按照项目进行配置
						var ws = new WebSocket("ws://localhost:9010/bindingRecord");
						ws.onopen = function() {
							// Web Socket 已连接上，使用 send() 方法发送数据
							// ws.send("data");
							// alert("数据发送中...");
						};
						ws.onmessage = function(evt) {
							var received_msg = evt.data;
							// 接收后台推送的数据
							// alert("数据已接收..." + evt.data);
							if (Boolean(evt.data)) {
								_this.paySucc = true;
								setTimeout(() => {
									_this.dialogVisible = false;
									_this.QueryDetailsAll();
									_this.qr= "";
									_this.paySucc = false;
								}, 3 * 1000);
							}
							ws.close();
						};
						ws.onclose = function() {};
					} else {
						// 浏览器不支持 WebSocket
						alert("您的浏览器不支持 WebSocket!");
					}
				});
				this.dialogVisible = true;
			},
			async postApplyFor(row){//申请退款
				const res = await orderApi.postApplyFor("/znOrder/applyFor",{
					orderNumber: row.orderNumber
				});
				if (res.code == 200) {
					this.QueryDetailsAll();
					this.$notify({
						title: '申请成功',
						message: '请等待管理员审核',
						type: 'success'
					});
				} else {
					this.$notify.error({
						title: '错误',
						message: '发生错误，请联系管理员'
					});
				}
			},
			async handleRefund(row) { //退款
				const res = await orderApi.postRefund("/Alipay/refund?orderNumber=" + row.orderNumber);
				if (res.code == 200) {
					this.$notify({
						title: '申请成功',
						message: '请等待管理员审核',
						type: 'success'
					});
				} else {
					this.$notify.error({
						title: '错误',
						message: '这是一条错误的提示消息'
					});
				}
			},
			async QueryDetailsAll() {
				const res = await orderApi.QueryDetailsAll('/znOrder/OrderAndDetails', {
					pageId: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.detailsData = res.data.records;
					this.total = res.data.total;
				}
			},
			async deleteOrder(row) {
				const res = await orderApi.deleteOrder("/znOrder/deleteOrder/" + row.orderId);
				this.QueryDetailsAll();
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.QueryDetailsAll();
			},
			handleDelete(index, row) { //删除点击事件
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteOrder(row),
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleClose() {
				this.evaluatedialogVisible = false;
			},
			async Toevaluate(row) {
				console.log(row)
				const res = await orderApi.getOrderDetails("/znOrder/getOrderDetails/"+ row.orderId);
				if(res.code==200){
					this.evaluatedialogVisible =true;
					this.rowcopy = res.data;
				}
			},
			addHandleClose(){
				this.innerVisible = false;
				this.input = '';
				this.value = 0;
			},
			EditHandleClose(){
				this.editInnerVisible = false;
				this.input = '';
				this.value = 0;
			},
			rateOrder(value) {
				this.value = value
			},
			onClickEvaluate(index, item) {
				this.innerVisible = true
				this.farmDetailsDate = item;
				console.log(index)
				console.log(item)
			},
			editEvaluate(index, item){
				this.editInnerVisible = true
				this.farmDetailsDate = item;
				this.input = item.evaluateBean.content;
				this.value = item.evaluateBean.score;
			},
			async SubmitEvaluation() {//评价
				console.log(this.farmDetailsDate);
				let evaData = {
					farmId: this.farmDetailsDate.farmId,
					farmSpecId: this.farmDetailsDate.specificationBean.id,
					content: this.input,
					score: this.value,
					orderId: this.farmDetailsDate.orderId,
					detailsId: this.farmDetailsDate.detailsId
				}
				const res = await evaApi.addEvaluate("/znFarmEvaluate/addEvaluate", evaData);
				if (res.code == 200) {
					this.innerVisible = false
					this.input = '';
					this.value = 0;
					this.Toevaluate(this.farmDetailsDate);
					this.$notify({
						title: '成功',
						message: '评价成功',
						type: "success",
						offset: 100
					});
				}else{
					this.$notify({
						title: '失败',
						message: '请检查输入的数据',
						type: "error",
						offset: 100
					});
				}
			},
			async EidtEvaluation(){//修改评价
				let evaData = {
					id: this.farmDetailsDate.evaluateBean.id,
					content: this.input,
					score: this.value,
				};
				const res = await evaApi.EditEvaluate("/znFarmEvaluate/EditEvaluate", evaData);
				if (res.code == 200) {
					this.editInnerVisible = false
					this.input = '';
					this.value = 0;
					this.Toevaluate(this.farmDetailsDate);
					this.$notify({
						title: '成功',
						message: '评价成功',
						type: "success",
						offset: 100
					});
				}else{
					this.$notify({
						title: '失败',
						message: '请检查输入的数据',
						type: "error",
						offset: 100
					});
				}
			},
			async TakeDelivery(index,row){
				let order = {
					orderNumber : row.orderNumber
				};
				const res = await orderApi.postTakeDelivery("/znOrder/takeDelivery",order);
				if (res.code == 200) {
					this.QueryDetailsAll();
					this.$notify({
						title: '成功',
						message: '收货成功',
						type: "success",
						offset: 100
					});
				}else{
					this.$notify({
						title: '失败',
						message: '请联系管理员',
						type: "error",
						offset: 100
					});
				}
			}
		},
		created() {
			this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
			this.QueryDetailsAll();
		}
	};
</script>

<style lang="scss" scoped>
	.order-evaluate {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 10px;
		justify-content: space-between;

		.Infocard {
			position: relative;
			width: calc(100% - 130px);
			display: flex;
			justify-content: space-between;
			align-items: center;

			.farmInfo {
				font-family: PingFangSC-Regular;
				font-size: 12px;
				color: #909090;
				letter-spacing: 0;
			}

			.count {
				font-family: PingFangSC-Regular;
				font-size: 12px;
				color: #909090;
				letter-spacing: 0;
			}
		}
	}

	::v-deep .el-rate__icon {
		font-size: 25px;
	}

	::v-deep .el-rate__text {
		font-size: 20px;

	}

	::v-deep .el-textarea__inner {
		height: 140px;
	}

	.demo-table-expand {
		margin-left: 30px;
		font-size: 0;
	}

	::v-deep .el-form-item__content {
		display: flex;
		margin: 15px;
		line-height: 0;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
	}

	.demo-table-expand .el-form-item .avatar {
		width: 148px;
		height: 148px;
		border-radius: 3%;
		margin-right: 10px;
	}

	.demo-table-expand .el-form-item .InfoBox {
		width: 70%;
	}

	.InfoBox {
		display: flex;
		justify-content: space-between;
		position: relative;

		.farmInfo {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		.count {
			position: absolute;
			right: 0%;
			top: 50%;
		}
	}

	#dialogSpan {
		display: inline-block;
		width: 200px;
		height: 200px;
		position: absolute;
		top: 80px;
		right: 27px;
		opacity: 0.9;
		background-color: #FFFFFF;
	}

	#dialogSpan2 {
		display: inline-block;
		width: 100px;
		height: 100px;
		position: absolute;
		top: 124px;
		right: 80px;
		font-size: 20px;
		text-align: center;
	}
</style>